<template>

  <view class="wrap">
    <view class="list-wrap swiper-box">
      <u-swiper bgColor="#ffffff" :list="data_list" name="pic" :height="300" :effect3d="effect3d"
                :indicator-pos="indicatorPos" borderRadius="20" :mode="mode" :interval="3000"></u-swiper>
    </view>
	<u-gap height="70"></u-gap>
	<div class="menu-list">
		<div class="menu-box" @click="openPage(item.path)" v-for="(item,index) in menuList" :key="index">
			<u-icon :name="item.icon" color="#747572" size="50"></u-icon>
			<p>{{item.name}}</p>
		</div>
	</div>
    <u-gap height="70"></u-gap>
	<view class="news-list">
	  <view class="news-item" v-for="(item, index) in feelist"  @click="showDetail(item)">
	    <image class="news-image" :src="item.pic" mode="aspectFill"></image>
	    <view class="news-info">
	      <view class="news-title">{{ item.title }}</view>
		  <view class="news-detail">{{ item.detail }}</view>
	      <view class="news-meta">
	        <text class="news-author">{{ item.author }}</text>
	        <text class="news-time">{{ item.publish_date.substring(0, 10) }}</text>
	      </view>
	    </view>
	  </view>
	  <div class="tips">没有更多内容了</div>
	</view>
  </view>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {

  },
  data() {
    return {
      data_list: [],
      title: false,
      mode: 'round',
      indicatorPos: 'bottomCenter',
      effect3d: true,
	  feelist: [],
	  menuList: [
		  {
			  name: '预报到',
			  path: '/pages/template/p/precheck',
			  icon: 'file-text'
		  },
		  {
			  name: '学费明细',
			  path: '/pages/template/p/feelist',
			  icon: 'rmb-circle-fill'
		  },
		  {
			  name: '缴费记录',
			  path: '/pages/template/p/pay',
			  icon: 'order'
		  }
	  ]
    }
  },
  computed: {
    getIcon() {
      return path => {
        return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
      }
    },
    desc() {
      return this.$t('components.desc');
    },
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t('nav.components')
    });
  },
  onLoad(options){
	  if(window.location.href.substr(-7) === 'STATE#/'){
		window.open(`http://kirara.asia/#/?code=${window.location.href.split('?')[1].split('&')[0].split('=')[1]}`,'_self')
		return
	  }
	  const {code}  = options
	  if(this.vuex_user.id) return
	  if (code === undefined){
	  	window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww1400c001e2d36d1f&redirect_uri=http://kirara.asia&response_type=code&scope=snsapi_privateinfo&state=STATE&agentid=1000002#wechat_redirect','_self')
	  }else{
	  	let that = this
	  	this.$u.get('/wx/wxLogin', {code}).then(res => {
	  	  that.$u.vuex('vuex_user', res)
	  	})
	  }
  },
  created() {

    console.log(1)
    this.swiperList()
	this.newList()
  },
  methods: {
    swiperList() {
      this.$u.get('/carousel/list', {
        pageSize: 20
      }).then(res => {
        console.log(res)
        this.data_list = res.list
      })
    },
    getGet() {
      this.$u.get('/major/list', {
        id: 2
      }).then(res => {
        this.result = res;
      })
    },
    openPage(path) {
      this.$u.route({
        url: path
      })
    },
    getGroupTitle(item) {
      return this.$i18n.locale == 'zh' ? item.groupName : item.groupName_en
    },
    getFieldTitle(item) {
      return this.$i18n.locale == 'zh' ? item.title : item.title_en
    },
	newList() {
	  this.$u.get('/news/list', {
	    pageSize: 10000
	  }).then(res => {
	    console.log(res)
	    this.feelist = res.list;
	  })
	},
	showDetail(news) {
	  // this.selectedNews = news;
	  // this.show = true
	  this.$u.route({
	    url: 'pages/example/detail?id=' + news.id
	  })
	},
	openPage(path) {
	  console.log(this.vuex_user)
	  console.log(path)
	  if (path.indexOf("login") > 0 || this.vuex_user.id) {
	    this.$u.route({
	      url: path.indexOf('/page') == 0 ? path : '/pages/template/' + path + '/index'
	    })
	  } else {
	    uni.showToast({
	      title: '请先登录',
	    icon: 'none',
	      duration: 2000
	    })
	  }
	},
  }
}
</script>

<style>
/* page {
  background-color: rgb(240, 242, 244);
} */
</style>

<style lang="scss" scoped>
	.swiper-box{
		padding: 0 30rpx;
	}
.u-cell-icon {
  width: 36 rpx;
  height: 36 rpx;
  margin-right: 8 rpx;
}

.item {
  margin: 30 rpx 0;
}
.menu-list{
	display: flex;
	justify-content: space-evenly;
	.menu-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
}
.news-list{
	display: flex;
	flex-flow: column;
	.tips{
		text-align: center;
		font-size: 25rpx;
		color: #666;
		margin-top: 40rpx;
	}
	.news-item{
		display: flex;
		padding: 0 40rpx;
		gap: 20rpx;
		.news-image{
			width: 200rpx;
			height: 200rpx;
			background: #2A2D41;
			border-radius: 10px;
		}
		.news-info{
			width: calc(100% - 220rpx);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.news-title{
				font-weight: 900;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.news-detail{
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.news-meta{
				display: flex;
				font-size: 20rpx;
				justify-content: space-between;
				.news-author{
					width: 300rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>